<template>
	<view class="content">
		<Header title="我的收藏" :showBack='true'></Header>
		<view class="shop-list">
			<view class="shop-item" :class="{'no-border':index == 0}" v-for="(item,index) in dataList" :key="index">
				<view class="left">
					<u--image :src="item.logo | setImgUrl" width="165rpx" height="165rpx" mode="aspectFill">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u--image>
				</view>
				<view class="center">
					<!-- <view >
						
					</view> -->
					<u--text  class="title" :lines="1" :text="item.shop_name"></u--text>
					<view class="type" v-if="item.labelList && item.labelList.length">
						<text v-for="(lableItem,elIndex) in item.labelList" :key="elIndex">{{lableItem}}</text>
					</view>
					<view class="tip" v-if="item.discount">
						<view class="icon">
							惠
						</view>
						<view>
							{{item.discount}}
						</view>
					</view>
				</view>
				<view class="right" @click="nocollection(item)">
					取消收藏
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	import Header from '@/components/header.vue'
	export default {
		data() {
			return {
				userInfo:{},
				dataList:[]
			}
		},
		components:{
			Header
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 取消收藏
			nocollection(item){
				uni.$u.http.post('/shop/nocollection',{shop_id:item.id} ).then(res => {
					this.$u.toast('已取消')
					this.getDataList()
				})
			},
			// 获取个人信息
			getUserInfo(){
				uni.$u.http.post('/shop/userinfo', ).then(res => {
					this.userInfo = res.data
					this.getDataList()
				})
			},
			getDataList(){
				uni.$u.http.post('/shop/collectionlist', {user_id:this.userInfo.id}).then(res => {
					this.dataList = res.data
					this.dataList.forEach(el=>{
						el.labelList = el.label.split(',')
					})
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.shop-list{
		width: 684rpx;
		margin-top: 12rpx;
		padding-bottom: 30px;
	}
	.shop-item{
		// height: 236rpx;
		padding: 34rpx 0px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #d8d8d8;
		.left{
			width: 165rpx;
			height: 165rpx;
			border-radius: 24rpx;
			overflow: hidden;
		}
		.center{
			width: 340rpx;
			// height: 165rpx;
			.title{
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-top: 12rpx;
			}
			.type{
				font-size: 20rpx;
				font-weight: 400;
				color: #333333;
				margin-top: 16rpx;
				text{
					margin-right: 20rpx;
				}
			}
			.tip{
				font-size: 20rpx;
				font-weight: 400;
				color: #333333;
				display: flex;
				// align-items: center;
				margin-top: 34rpx;
				.icon{
					width: 26rpx;
					height: 24rpx;
					background: #FF7200;
					border-radius: 4rpx;
					line-height: 24rpx;
					text-align: center;
					color: #FFFFFF;
					margin-right: 12rpx;
				}
			}
		}
		.right{
			width: 135rpx;
			height: 48rpx;
			background: #F1F1F1;
			box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			font-size: 20rpx;
			font-weight: bold;
			color: #6E6E6E;
			text-align: center;
			line-height: 48rpx;
		}
	}
	.no-border{
		border-top: 0px;
	}

</style>
